.flexjs {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;}

  .lt42 {
    padding: 0.5rem 0 0 0;}

    .lt42 li {
        width: 1.2rem;
        transition: .5s;}

    .lt42 .a {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: .08rem;}

    .lt42 .imgBox .img {
        padding-bottom: 2.5rem;
        background: #000;}

    .lt42 .imgBox .img img {
        opacity: .5;}

    .lt42 .top {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: .3rem .4rem;
        opacity: 0;
        transition: .5s;}

    .lt42 .top h3 {
        font-size: .24rem;
        color: #fff;
        font-weight: bold;}

    .lt42 .top h6 {
        font-size: .14rem;
        color: #fff;}

    .lt42 .top1 {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: .3rem .1rem;
        transition: .5s;}

   .lt42 .top1 h3 {
    writing-mode: tb-rl;
    font-size: .24rem;
    color: #fff;
    font-weight: bold;
    height: 70%;
    line-height: .30rem;}

    .lt42 .top1 i {
        font-size: .3rem;
        color: #fff;
        font-family: 'lib';}

    .imgBox .img,
    .imgBox .imgLi {
        padding-bottom: 60%;
        transition: .5s;
        background-size: cover;
        display: block;
        background-repeat: no-repeat;
        background-position: center;
        display: block;
        background: #eee;}

    .imgBox .img,
    .imgBox .imgLi {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;}

    .imgBox .img.light::before {
        content: '';
        position: absolute;
        top: 0;
        left: -86%;
        z-index: 2;
        display: block;
        width: 50%;
        height: 100%;
        -webkit-transform: skewX(-25deg);
        transform: skewX(-25deg);
        background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .1));
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .1));}

    .imgBox img,
    .imgBox video {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        transition: .5s;}

    .lt42 li.on {
        width: calc(100% - 1.2rem * 7 - .2rem);}

    .flex {
        display: flex;
        flex-wrap: wrap;}

    .lt42 li.on .top1 {
        opacity: 0;}

    .lt42 li.on .top {
        opacity: 1;}

    .a:hover .imgBox .img.light::before {
        -webkit-animation: shine .5s;
        animation: shine .5s;}

    .lt42 li.on .img img {
        opacity: 1;}

    @-webkit-keyframes shine {
        100% {
            left: 115%;}
    }

    @keyframes shine {
        100% {
            left: 115%;}
    }

    @media (max-width: 1199px) {

        .lt42 li {
            width: 14% !important;
            padding: 0 1px;
            margin-bottom: .2rem;}

        .lt42 li.on .img img {
            opacity: .5 !important;}

        .lt42 .top1 i {
            font-size: .24rem;}

        .lt42 .top1 h3 {
            font-size: .2rem;}

        .lt42 .top1 {
            padding: 15px 15px;}

        .lt42 .imgBox .img {
            padding-bottom: 200px;}
          .lt42 li.on .top1 {
        opacity: 1;}

    .lt42 li.on .top {
        opacity: 0;}
    }